<template>
    <div class="containerring" id="circle" :style="{'background': color,'width':handleSize,'height':handleSize}">
        　　<div class="leftring">
            <div class="left"
                :style="{'background': ringtrackcolor,'border-radius':handRadius('l'), 'transform':`${renderLeft()}`}">
            </div>
        </div>
        <div class="rightring">
            <div class="right"
                :style="{'background': ringtrackcolor,'border-radius':handRadius('r'),'transform':`${renderRight()}`}">
            </div>
        </div>
        <div class="proportion" :style="{'width':mw,'height':mw}"></div>
    </div>
</template>
<script>
    export default {
        name: "lj-chart",
        props: {
            color: { //环状图颜色
                type: String,
                default: '#fff'
            },
            diameter: { //进度条宽度
                type: Number,
                default: 40
            },
            ringtrackcolor: { //环状图轨道颜色
                type: String,
                default: '#ff2525'
            },
            rotate: {
                type: String | Number,
                default: 19
            },
            size: { //容器大小
                type: Number,
                default: 200
            },
        },

        data() {
            return {
                getBoxW: null
            };
        },
        computed: {
            mw() {
                const makeW = `${this.getBoxW?.width - this.diameter}px`
                return makeW
            },
            handleSize() {
                const hSize = `${this.size}px`
                return hSize
            },

        },
        methods: {
            async init() {
                this.getBoxW = await this.getBox()
                console.log(this.getBoxW)
            },
            async getBox() {
                let obj = null
                return new Promise(resolve => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#circle`).boundingClientRect(data => {
                        obj = data
                    }).exec(() => {
                        resolve(obj);
                    });
                })
            },
            handRadius(type) {
                let htm = ``
                const bSize = `${this.size/2}px`
                if (type == 'l') {
                    htm = `${bSize} 0 0 ${bSize}`
                } else {
                    htm = `0 ${bSize} ${bSize} 0`
                }
                return htm
            },
            renderLeft() {
                let rotateNum = this.rotate * 3.6;
                // console.log(rotateNum)
                if (rotateNum <= 180) {
                    return `rotate(${0}deg)`
                } else {
                    return `rotate(${(rotateNum-180)}deg)`
                }
            },
            renderRight() {
                let rotateNum = this.rotate * 3.6;
                if (rotateNum <= 180) {
                    return `rotate(${rotateNum}deg)`
                } else {
                    return `rotate(${180}deg)`
                }

            },
        },
        mounted() {
            this.init()
        }
    }
</script>

<style lang="scss">
    .containerring {
        width: 110px;
        height: 110px;
        position: relative;
        border-radius: 50%;
        background: #ff2525;
        border: 1rpx solid #ff2525;

        .leftring {
            width: 50.6%;
            height: 100%;
            margin: 0px;
            position: absolute;
            left: -0.4%;
            top: 0;
            overflow: hidden;
        }

        .rightring {
            width: 50.6%;
            height: 100%;
            margin: 0px;
            position: absolute;
            right: -0.4%;
            top: 0;
            overflow: hidden;
        }

        .left {
            width: 100%;
            height: 100%;
            border-radius: 55px 0 0 55px;
            border: 1rpx solid #ff2525;
            // background: #EBEEF5;
            transform-origin: right center;
        }

        .right {
            width: 100%;
            height: 100%;
            border-radius: 0 55px 55px 0;
            border: 1rpx solid #ff2525;
            // background: #EBEEF5;
            transform-origin: left center;
        }

        .proportion {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ff2525;
            border-radius: 50%;
            border: 1rpx solid #ff2525;
            font-size: 20px;
            // padding: 10px;
            box-sizing: border-box;
            text-align: center;
        }
    }
</style>